<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="../../components/echarts-4.0.4.min.js"></script>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      background: #0A0F23;
    }

    * {
      margin: 0;
      padding: 0;
    }

  </style>
</head>

<body>
  <div id="main" style="width: 100%;height: 100%;"></div>
</body>
<script>
  var myChart = echarts.init(document.getElementById('main'));

  function getData(value) {
    return [{
      value: value,
      name: value,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#336c9c'
          }, {
            offset: 1,
            color: '#62cff1'
          }])
        }
      }
    }, {
      value: 63000 - value,
      //value: 70000 - value,
      itemStyle: {
        normal: {
          color: 'transparent'
        }
      }
    }];
  }

  placeHolderStyle = {
    normal: {
      label: {
        show: false,
        position:'inside',
        textStyle: {
            color: '#fff',
            fontSize: 14
        }
      },
      labelLine: {
        show: false
      }
    }
  };
  option = {
    color: ['#0179c4','#0097db','#00a3ac','#029f85','#009f5c','#81bd41','#f44a4a','#ed5f05', '#f29806', '#fdc901','#fdf100','#c0d528'],
    backgroundColor: '#0A0F23',
    tooltip: {
      trigger: 'item',
      formatter: "{a}:{b}件"
    },
    title: {
      text: '仪器共享单位分类',
      left: 'center',
      top: '5%',
      textStyle: {
        color: '#fff',
        fontSize: 22
      }
    },
    legend: {
      top: "23%",
      left: "0%",
      align: "right",
      itemHeight: 10,
      data: ['高等院校', '普通科研院所', '军工类科研院所'],
      textStyle: {
        color: '#fff',
        fontSize: 18
      },
      selectedMode: true,
      orient: "vertical"
    },
    grid: {
      top: '10%',
      left: '10%',
      bottom: '5%',
      right: '10%',
      containLabel: true
    },
    series: [{
      name: '单位数',
      type: 'pie',
      clockWise: true, //顺时加载
      hoverAnimation: false, //鼠标移入变大
      radius: [0, '30%'],
      borderWidth: 5,
      center: ['50%', '55%'],
      itemStyle: { //图形样式
          normal: {
            borderColor: '#fff',
            borderWidth: 1
          }
        },
        label: { //标签的位置
          normal: {
            show: true,
            position: 'inside', //标签的位置
            formatter: "{d}%",
            textStyle: {
              color: '#fff'
            }
          }
        },
      data:[
                {value:20, name:'高等院校'},
                {value:60, name:'普通科研院所'},
                {value:33, name:'军工类科研院所'}
            ]
    }, {
      name: '仪器数',
      type: 'pie',
      clockWise: true, //顺时加载
      hoverAnimation: false, //鼠标移入变大
      radius: ['40%', '55%'],
      borderWidth: 5,
      center: ['50%', '55%'],
      itemStyle: { //图形样式
          normal: {
            borderColor: '#fff',
            borderWidth: 1
          }
        },
        label: { //标签的位置
          normal: {
            show: true,
            position: 'inside', //标签的位置
            formatter: "{d}%",
            textStyle: {
              color: '#fff'
            }
          }
        },
      data:[
                {value:3553, name:'高等院校'},
                {value:1484, name:'普通科研院所'},
                {value:3073, name:'军工类科研院所'}
            ]
    }]
  };

  myChart.setOption(option);
</script>

</html>
